<template>
  <div ref="myuserhead">
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <div class="header">
      <div class="head-container">
        <div class="bg">
          <img src="../../assets/defaultAvatar.34b4451.png" alt="" />
        </div>
        <div class="shadow"></div>
        <div class="head-content">
          <div class="user-portait-container">
            <div class="user-head-portait">
              <div class="user-avatar">
                <img
                  style="width: 80px; height: 80px"
                  src="../../assets/defaultAvatar.34b4451.png"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="info">
            <div class="base">
              <div class="username" style="max-width: 165px">
                {{ userHead.userName }}
              </div>
              <div class="level-tag">
                <div class="level">
                  <span class="v">V</span>
                  <span class="lv">{{ userHead.level }}</span>
                  <span class="text">会员</span>
                </div>
              </div>
              <div class="hint">{{ userHead.bio }}</div>
            </div>
          </div>
        </div>
        <div class="head-bottom">
          <div class="following" @click="handlerFollowing(userHead.userId)">
            <span class="number">{{ userHead.followingNum }}</span>
            <span class="item">关注</span>
          </div>
          <div class="split"></div>
          <div class="followers" @click="handlerFollower(userHead.userId)">
            <span class="number">{{ userHead.followerNum }}</span>
            <span class="item">粉丝</span>
          </div>
        </div>
      </div>

      <div
        class="person-page-tabs tabs border-bottom"
        style="visibility: visible"
      >
        <router-link
          :to="{ name: 'all' }"
          class="all selected"
          active-class="active"
        >
          <span>全部</span>
          <div class="tab-line"></div>
        </router-link>
        <router-link
          :to="{ name: 'comments' }"
          class="comments"
          active-class="active"
        >
          <span>评论 {{ userHead.watchedNum }}</span>
          <div class="tab-line"></div>
        </router-link>
        <router-link
          :to="{ name: 'wantwatch' }"
          class="wantWatch"
          active-class="active"
        >
          <span>想看{{userHead.wantWatchNum}}</span>
          <div class="tab-line"></div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import http from "../../util/http";
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store=useStore()
    const route = useRoute();
    const router = useRouter();
    const userHead = ref("");
    const myuserhead=ref('')
    const handlerFollowing =(id)=>{
      store.commit('changeUserId',id)
      router.push(`/search/user/following/${store.state.userId}`)
    } 
    const handlerFollower=(id)=>{
      store.commit('changeUserId',id)
      router.push(`/search/user/follower/${store.state.userId}`)
    }
    const onClickLeft = () => router.push('/search')

    onMounted(() => {
      myuserhead.value=myuserhead.value.offsetHeight
      store.commit('changeUserHeadHeight',myuserhead.value)
      // console.log(myuserhead.value);
      http({
        url: `/api/v1/user/${route.params.myid}`,
      }).then((res) => {
        console.log(res.data);
        userHead.value = res.data;
        console.log(userHead);
      });
    });

    return {
      userHead,
      onClickLeft,
      handlerFollowing,
      handlerFollower,
      myuserhead
    };
  },
};
</script>

<style lang="scss" scoped>
.van-nav-bar {
  float: left;
  z-index: 999;
}
.head-container {
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 190px;
  overflow: hidden;
  position: relative;
  .bg {
    background-size: cover;
    filter: blur(10px);
    width: 100%;
    bottom: 0;
    position: absolute;
    height: 100%;
    content: "";
    img {
      width: 100%;
    }
  }
  .shadow {
    width: 100%;
    bottom: 0;
    position: absolute;
    height: 100%;
    content: "";
    background-image: -webkit-linear-gradient(
      top,
      transparent,
      rgba(0, 0, 0, 0.7)
    );
  }
  .head-content {
    position: relative;
    z-index: 5;
    margin-top: 40px;
    .user-portait-container {
      width: 80px;
      float: left;
      margin-left: 24px;
      .user-head-portait {
        margin-top: 20px;
        width: 75px;
        img {
          position: relative;
          background-size: cover;
          background-position: center;
          border: 2px solid #fff;
          box-sizing: border-box;
          border-radius: 50%;
        }
      }
    }
    .info {
      overflow: hidden;
      padding-left: 15px;
      color: #fff;
      padding-top: 20px;
      font-size: 16px;
      min-height: 65px;
      padding-right: 15px;
      .base {
        overflow: hidden;
        .username {
          font-size: 18px;
          font-weight: 400;
          display: inline-block;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          height: 20px;
        }
        .level-tag {
          height: 20px;
          display: inline-block;
          position: relative;
          top: 2px;
          margin-left: 4px;
          .level {
            position: relative;
            height: 20px;
            display: inline-block;
            border: 1px solid rgba(255, 255, 255, 0.16);
            padding: 2px 7px;
            box-sizing: border-box;
            border-radius: 10px;
            color: #fff;
            background-color: rgba(255, 255, 255, 0.16);
            .v {
              font-family: Athelas;
              font-size: 20px;
              position: relative;
              font-weight: bold;
              top: -5px;
            }
            .lv {
              font-size: 12px;
              position: relative;
              top: -5px;
            }
            .text {
              color: #fff;
              font-size: 12px;
              position: relative;
              top: -5px;
            }
          }
        }
        .hint {
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }
  }
  .head-bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 35px;
    margin-top: 20px;
    line-height: 35px;
    font-size: 12px;
    padding-left: 15px;
    color: #fff;
    margin-bottom: 5px;
    .following {
      width: 65px;
      float: left;
      text-align: center;
      .number {
        font-size: 18px;
        display: block;
        line-height: 16px;
        margin-bottom: 3px;
      }
      .item {
        display: block;
        line-height: 16px;
      }
    }
    .split {
      float: left;
      width: 1px;
      height: 21px;
      position: relative;
      top: 7px;
      background-color: rgba(255, 255, 255, 0.35);
    }
    .followers {
      width: 65px;
      float: left;
      text-align: center;
      .number {
        font-size: 18px;
        display: block;
        line-height: 16px;
        margin-bottom: 3px;
      }
      .item {
        display: block;
        line-height: 16px;
      }
    }
  }
}
.tabs {
  height: 46px;
  line-height: 46px;
  /* border-bottom: 1px solid #d8d8d8; */
  background-color: #fff;
  display: -webkit-flex;
  display: flex;
  z-index: 5;
  font-size: 16px;
  .all,
  .comments,
  .wantWatch {
    flex: 1;
    margin: 0 5%;
    text-align: center;
    float: left;
    position: relative;
    span {
      color: #999;
    }
    .tab-line {
      display: none;
      position: absolute;
      width: 46px;
      height: 2px;
      background-color: #ff2661;
      bottom: 0;
      left: 50%;
      margin-left: -22px;
    }
  }
  .active {
    span {
      color: #ff2661;
    }
    .tab-line {
      display: block;
    }
  }
}
</style>